<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>新建学生信息</span>
      <el-button style="float: right; padding: 3px 0" type="text"
        >操作按钮</el-button
      >
    </div>
    <div>
      <el-row>
        <el-form ref="form" :model="form" label-width="80px">
          <!-- --------左列 -->
          <el-col :span="16">
            <!--姓名-->
            <el-row :span="8">
              <el-form-item label="姓名" :span="6" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-row>

            <!-- 班级 -->
            <el-form-item label="班级">
              <el-select v-model="form.classId" placeholder="请选择班级">
                <!-- 通过数据动态生成未开班 -->
                <el-option
                  v-for="item in classList"
                  :key="item.classId"
                  :label="item.className"
                  :value="item.classId"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 性别 -->
            <el-form-item label="性别">
              <el-radio-group v-model="form.gender">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
                <el-radio label="2">其他</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- ------------左侧底部 -->
            <el-row>
              <!-- 左边 -->
              <el-col :span="6">
                <!-- 年龄 -->
                <el-form-item label="年龄">
                  <el-input v-model="form.age"></el-input>
                </el-form-item>
                <!-- 电话-->
                <el-form-item label="电话">
                  <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <!-- 身份证号 -->
                <el-form-item label="身份证号">
                  <el-input v-model="form.idCard"></el-input>
                </el-form-item>
                <!-- 地址 -->
                <el-form-item label="地址">
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
              </el-col>
              <!-- 右边 -->
              <el-col :span="10">
                <!-- 支付金额 -->
                <el-form-item label="支付金额">
                  <el-input v-model="form.pay"></el-input>
                </el-form-item>
                <!-- 缴费状态 -->
                <el-form-item label="缴费状态">
                  <el-radio-group v-model="form.payStatus">
                    <el-radio label="1">试听</el-radio>
                    <el-radio label="2">欠费</el-radio>
                    <el-radio label="3">已缴费</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <!-- --------------------右列 -->
          <el-col :span="6" :offset="0">
            <!-- 照片 -->
            <el-form-item label="照片" prop="imgUrl">
              <el-upload
                ref="upload"
                class="avatar-uploader"
                action="http://localhost:3000/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <!-- 提交和取消按钮 -->
            <el-row
              style="margin-top: 200px; display: flex; justify-content: center"
            >
              <el-button type="primary" @click="submitForm('form')"
                >提交</el-button
              >
              <el-button type="info" @click="resetForm()">重置</el-button>
            </el-row>
          </el-col>
        </el-form>
        <!-- </el-col> -->
      </el-row>
    </div>
  </el-card>

  <!-- 视图表 -->
  <!-- <pic></pic> -->
</template>

<script>
import { selectClassByStatus, addNewStudent } from "@/api/http.js";
import pic from "../chart/pic.vue";
export default {
  components: {
    pic,
  },
  // -------------------数据
  data() {
    return {
      // 头像数据
      imageUrl: "",
      // 表单数据
      form: {
        name: "",
        classId: "",
        age: "",
        gender: "",
        tel: "",
        idCard: "",
        address: "",
        imgUrl: "",
        pay: null,
        payStatus: "1",
      },
      //未开班的数据
      classList: [],
      // 设置上传图片的请求头携带token
      headers: {
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
    };
  },
  // -------------------方法
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // 处理文件上传成功之后的代码
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.imgUrl = res.url;
      console.log(this.form.imgUrl);
    },
    // 处理文件上传之前格式和尺寸验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 获取未开班的信息方法
    getClassInfo() {
      selectClassByStatus(0) // 0 表示未开班
        .then((res) => {
          let { code, list } = res.data;
          if (code == 0) {
            this.classList = list;
            // console.log(this.classList);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //提交表单时
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addNewStudent(this.form)
            .then((res) => {
              if (res.status === 200) {
                this.$message.success("添加数据成功");
                // this.$refs.upload.clearFiles(); //清除头像
                this.clearImga();
                this.form = {}; //添加数据成功的时候，将表单清空
              } else {
                console.log(res);
              }
            })
            .catch((err) => {
              this.$message.warning("超时添加数据失败");
            });
        }
      });
    },

    // 清楚图片缓存方法
    clearImga() {
      const mainImg = this.$refs.upload;
      if (mainImg && mainImg.length) {
        mainImg.forEach((item) => {
          // item.uploadFiles.length = 0;
          item.clearFiles();
        });
      }
    },

    // 重置表单
    resetForm() {
      this.form = {};
    },
  },

  //------------------创建生命周期
  created() {
    this.getClassInfo(); //获取未开班的信息
  },
  // ----------------挂载后生命周期
  mounted() {
    // this.$refs.upload.clearFiles(); //清除头像
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>